<template>
  <div>
    <div id="menu" style=" height:1000px; width:20%; float:left;">
      <p>这里填树状图</p></p>
      <Tree :data="baseData" show-checkbox></Tree>
    </div>

    <div style=" float:right; width:79%;">
      <div  style="background-color:#EEEEEE;">
        <p>这里填统计图，（圆形+方形）</p>
        <Card shadow>
          <chart-pie style="height: 300px; width:400px" :value="pieData" text="用户访问来源"></chart-pie>
        </Card>
      </div>

      <div  style="background-color:pink; height:400px; margin:10px 0px">
          <p>学科表格</p>
          <chart-bar style="height: 300px;" :value="barData2" text="每周用户活跃量"/>
      </div>


    </div>


  </div>
</template>

<script>
import { ChartPie, ChartBar } from '_c/charts'
    export default {
        components: {
            ChartPie,
            ChartBar
        },
        data () {
            return {
                baseData: [{
                    expand: false,
                    title: 'parent 1',
                    children: [{
                        title: 'parent 1-0',
                        expand: true,
                        disabled: true,
                        children: [{
                            title: 'leaf',
                            disableCheckbox: true
                        }, {
                            title: 'leaf',
                        }]
                    }, {
                        title: 'parent 1-1',
                        expand: true,
                        checked: true,
                        children: [{
                            title: '<span style="color: red">leaf</span>',
                        }]
                    }]
                }],
                pieData: [
                    { value: 335, name: '直接访问' },
                    { value: 310, name: '邮件营销' },
                    { value: 234, name: '联盟广告' },
                    { value: 135, name: '视频广告' },
                    { value: 1548, name: '搜索引擎' }
                ],
                barData2: {
                    "Mon": 13253,
                    Tue: 34235,
                    Wed: 26321,
                    Thu: 12340,
                    Fri: 24643,
                    Sat: 1322,
                    Sun: 1324
                }
            }
        },

        created(){
          //页面渲染之前执行
          this.getTreeData();
          this.getChartData();
        },

        //
        methods:{
            //获取树数据
            getTreeData(){
                this.$get("/subject/queryAllByTree")
                .then(res=>{
                    if(res.data.data){
                        this.baseData=res.data.data
                    }
                })
            },

            //获方形统计图
            getChartData(){
                this.$get("/subject/queryChart")
                .then(res=>{
                    if(res.data.data){
                        this.barData2 = res.data.data
                    }
 
                })
            }

        }
    }
</script>
